<template>
  <div>
    <!-- 容器 -->
    <dv-full-screen-container>
      <!-- 最外边框 -->
      <div style="width: 100%; height: 100%; background: rgb(3 19 39 / 82%)">
        <span v-if="initLoading">
          <dv-loading>Loading...</dv-loading>
        </span>
        <dv-border-box-11 title="访问统计:6965万">
          <div style="margin: 0 20px; height: 100%">
            <!-- 上部 -->
            <el-row class="content-box1" :gutter="10">
              <el-col style="height: 100%;" :span="6">
                <el-row class="test-1" style="height: 50%; width: 100%;">
                  <dv-border-box-12>
                    <!-- 装饰 -->
                    <dv-decoration-1 style="width:60%;height:20%;"/>
                    性能监控
                    <dv-percent-pond :config="config0_0" style="width:99%;height:24%;" />
                    <dv-percent-pond :config="config0_1" style="width:99%;height:24%;" />
                    <dv-percent-pond :config="config0_2" style="width:99%;height:24%;" />
                  </dv-border-box-12>
                </el-row>
                <el-row class="test-1" style="height: 50%; width: 100%;">
                  <dv-border-box-13>
                    <!-- 装饰 -->
                    <dv-decoration-2 style="margin-left: 10px; width:92%;height:25px;"/>
                    左中<dv-scroll-board :config="config3" style="width:100%;height:220px" />
                  </dv-border-box-13>
                </el-row>
              </el-col>
              <el-col style="height: 100%;" :span="12">
                <el-row class="test-1" style="height: 100%; width: 100%">
                  <dv-border-box-9>
                    <div>
                      <!--装饰-->
                    </div>
                    中中<dv-flyline-chart :config="config" style="width:100%;height:100%;" />
                  </dv-border-box-9>
                </el-row>
              </el-col>
              <el-col style="height: 100%;" :span="6">
                <el-row class="test-1" style="height: 50%; width: 100%;">
                  <dv-decoration-3 style="width:70%;height:30px;"/>
                  右上
                  <dv-decoration-9 style="width:150px;height:150px;">66%</dv-decoration-9>
                </el-row>
                <el-row class="test-1" style="height: 50%; width: 100%;">
                  <dv-border-box-8>
                    右中
                    <dv-capsule-chart :config="config1" style="width:300px;height:200px"/>
                  </dv-border-box-8>
                </el-row>
              </el-col>
            </el-row>
            <!-- 下部 -->
            <el-row class="content-box2" :gutter="10">
              <el-col style="height: 100%;" :span="6">
                <el-row style="border: 1px solid #000000; height: 100%; width: 100%;">
                  <!-- 左下 -->
                  <dv-capsule-chart :config="config2" style="width:300px;height:200px" />
                </el-row>
              </el-col>
              <el-col style="height: 100%;" :span="12">
                <el-row class="test-1" style="height: 100%; width: 100%;">
                  下中<dv-decoration-12 style="width:20%;height:20%;"/>
                  <dv-conical-column-chart :config="config5" style=" float: left;width:100%;height:200px;" />
                </el-row>
              </el-col>
              <el-col style="height: 100%;" :span="6">
                <el-row class="test-1" style="height: 100%; width: 100%;">
                  右下<dv-scroll-ranking-board :config="config4" style="width:100%;height:300px" />
                </el-row>
              </el-col>
            </el-row>
          </div>

        </dv-border-box-11>
      </div>

    </dv-full-screen-container>
  </div>
</template>

<script>
export default {
  name: "Home",
  components: {},
  data() {
    return {
      initLoading: false,
      option: '',
      // data-v
      config: {
        centerPoint: [0.48, 0.35],
        points: [
          {
            position: [0.52, 0.235],
            text: '新乡'
          },
          {
            position: [0.43, 0.29],
            text: '焦作'
          },
          {
            position: [0.59, 0.35],
            text: '开封'
          },
          {
            position: [0.53, 0.47],
            text: '许昌'
          },
          {
            position: [0.45, 0.54],
            text: '平顶山'
          },
          {
            position: [0.36, 0.38],
            text: '洛阳'
          },
          {
            position: [0.62, 0.55],
            text: '周口'
          },
          {
            position: [0.56, 0.56],
            text: '漯河'
          },
          {
            position: [0.37, 0.66],
            text: '南阳'
          },
          {
            position: [0.55, 0.81],
            text: '信阳'
          },
          {
            position: [0.55, 0.67],
            text: '驻马店'
          },
          {
            position: [0.37, 0.29],
            text: '济源'
          },
          {
            position: [0.20, 0.36],
            text: '三门峡'
          },
          {
            position: [0.76, 0.41],
            text: '商丘'
          },
          {
            position: [0.59, 0.18],
            text: '鹤壁'
          },
          {
            position: [0.68, 0.17],
            text: '濮阳'
          },
          {
            position: [0.59, 0.10],
            text: '安阳'
          }
        ],
        k: 0.5,
        bgImgUrl: '/img/flylineChart/map.jpg',
        centerPointImg: {
          url: '/img/flylineChart/mapCenterPoint.png'
        },
        pointsImg: {
          url: '/img/flylineChart/mapPoint.png'
        }
      },
      config1: {
        data: [
          {
            name: '南阳',
            value: 167
          },
          {
            name: '周口',
            value: 67
          },
          {
            name: '漯河',
            value: 123
          },
          {
            name: '郑州',
            value: 55
          },
          {
            name: '西峡',
            value: 98
          }
        ]
      },
      config2: {
        data: [
          {
            name: '南阳',
            value: 167
          },
          {
            name: '周口',
            value: 123
          },
          {
            name: '漯河',
            value: 98
          },
          {
            name: '郑州',
            value: 75
          },
          {
            name: '西峡',
            value: 66
          },
        ],
        colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
        unit: '单位',
        showValue: true
      },
      config3: {
        header: ['列1', '列2', '列3'],
        data: [
          ['<span style="color:#37a2da;">行1列1</span>', '行1列2', '行1列3'],
          ['行2列1', '<span style="color:#32c5e9;">行2列2</span>', '行2列3'],
          ['行3列1', '行3列2', '<span style="color:#67e0e3;">行3列3</span>'],
          ['行4列1', '<span style="color:#9fe6b8;">行4列2</span>', '行4列3'],
          ['<span style="color:#ffdb5c;">行5列1</span>', '行5列2', '行5列3'],
          ['行6列1', '<span style="color:#ff9f7f;">行6列2</span>', '行6列3'],
          ['行7列1', '行7列2', '<span style="color:#fb7293;">行7列3</span>'],
          ['行8列1', '<span style="color:#e062ae;">行8列2</span>', '行8列3'],
          ['<span style="color:#e690d1;">行9列1</span>', '行9列2', '行9列3'],
          ['行10列1', '<span style="color:#e7bcf3;">行10列2</span>', '行10列3']
        ],
        index: true,
        columnWidth: [50],
        align: ['center']
      },
      config4: {
        data: [
          {
            name: '周口',
            value: 55
          },
          {
            name: '南阳',
            value: 120
          },
          {
            name: '西峡',
            value: 78
          },
          {
            name: '驻马店',
            value: 66
          },
          {
            name: '新乡',
            value: 80
          },
          {
            name: '信阳',
            value: 45
          },
          {
            name: '漯河',
            value: 29
          }
        ]
      },
      config0_0:{value: 66},
      config0_1:{value: 48},
      config0_2:{value: 87},
      config5: {
        data: [
          {
            name: '周口',
            value: 55
          },
          {
            name: '南阳',
            value: 120
          },
          {
            name: '西峡',
            value: 71
          },
          {
            name: '驻马店',
            value: 66
          },
          {
            name: '新乡',
            value: 80
          },
          {
            name: '信阳',
            value: 35
          },
          {
            name: '漯河',
            value: 15
          }
        ],
        img: [
          '/img/conicalColumnChart/1st.png',
          '/img/conicalColumnChart/2st.png',
          '/img/conicalColumnChart/3st.png',
          '/img/conicalColumnChart/4st.png',
          '/img/conicalColumnChart/5st.png',
          '/img/conicalColumnChart/6st.png',
          '/img/conicalColumnChart/7st.png'
        ]
      }

    }
  },

  methods: {

  }
}
</script>

<style scoped>
.content-box1 {
  height: 70%;
  padding-top: 65px;
}

.content-box2 {
  height: 30%;
  padding-bottom: 20px;
}

.test-1 {
  border: 1px solid #000000;
  border-radius: 5px;
  text-align: center;
}
</style>
